import 'package:flex_color_scheme/flex_color_scheme.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:mangayomi/modules/anime/providers/state_provider.dart';
import 'package:mangayomi/modules/anime/widgets/subtitle_view.dart';
import 'package:mangayomi/modules/manga/reader/widgets/color_filter_widget.dart';
import 'package:mangayomi/providers/l10n_providers.dart';
import 'package:mangayomi/utils/extensions/build_context_extensions.dart';

class FontSettingWidget extends ConsumerStatefulWidget {
  final bool hasSubtitleTrack;
  const FontSettingWidget({super.key, required this.hasSubtitleTrack});

  @override
  ConsumerState<FontSettingWidget> createState() => _FontSettingWidgetState();
}

class _FontSettingWidgetState extends ConsumerState<FontSettingWidget> {
  @override
  Widget build(BuildContext context) {
    final subtitleSettings = ref.watch(subtitleSettingsStateProvider);
    return Padding(
      padding: const EdgeInsets.all(20),
      child: Column(
        children: [
          if (!widget.hasSubtitleTrack)
            Padding(
              padding: const EdgeInsets.only(bottom: 10),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  const Padding(
                    padding: EdgeInsets.all(2),
                    child: Icon(Icons.info_outline_rounded, size: 14),
                  ),
                  Flexible(
                    child: Text(context.l10n.no_subtite_warning_message),
                  ),
                ],
              ),
            ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              iconButton(
                Icons.remove,
                () {
                  ref
                      .read(subtitleSettingsStateProvider.notifier)
                      .set(
                        subtitleSettings
                          ..fontSize = subtitleSettings.fontSize! - 1,
                        true,
                      );
                  setState(() {});
                },
                backgroundColor: context.dynamicWhiteBlackColor,
                iconColors: context.isLight ? Colors.white : Colors.black,
                size: 25,
              ),
              SizedBox(
                width: 200,
                child: TextFormField(
                  controller: TextEditingController(
                    text: subtitleSettings.fontSize.toString(),
                  ),
                  keyboardType: TextInputType.number,
                  onChanged: (v) {
                    final val = int.tryParse(v);
                    if (val != null) {
                      ref
                          .read(subtitleSettingsStateProvider.notifier)
                          .set(subtitleSettings..fontSize = val, true);
                    }
                  },
                  decoration: InputDecoration(
                    labelText: context.l10n.font_size,
                    isDense: true,
                    filled: true,
                    fillColor: Colors.transparent,
                    enabledBorder: OutlineInputBorder(
                      borderSide: BorderSide(color: context.dynamicThemeColor),
                    ),
                    focusedBorder: OutlineInputBorder(
                      borderSide: BorderSide(color: context.dynamicThemeColor),
                    ),
                    border: OutlineInputBorder(
                      borderSide: BorderSide(color: context.dynamicThemeColor),
                    ),
                  ),
                ),
              ),
              iconButton(
                Icons.add,
                () {
                  ref
                      .read(subtitleSettingsStateProvider.notifier)
                      .set(
                        subtitleSettings
                          ..fontSize = subtitleSettings.fontSize! + 1,
                        true,
                      );
                  setState(() {});
                },
                backgroundColor: context.dynamicWhiteBlackColor,
                iconColors: context.isLight ? Colors.white : Colors.black,
                size: 25,
              ),
              iconButton(
                Icons.format_bold,
                () {
                  ref
                      .read(subtitleSettingsStateProvider.notifier)
                      .set(
                        subtitleSettings..useBold = !subtitleSettings.useBold!,
                        true,
                      );
                  setState(() {});
                },
                iconColors: subtitleSettings.useBold!
                    ? null
                    : context.dynamicWhiteBlackColor.withValues(alpha: 0.5),
              ),
              iconButton(
                Icons.format_italic,
                () {
                  ref
                      .read(subtitleSettingsStateProvider.notifier)
                      .set(
                        subtitleSettings
                          ..useItalic = !subtitleSettings.useItalic!,
                        true,
                      );
                  setState(() {});
                },
                iconColors: subtitleSettings.useItalic!
                    ? null
                    : context.dynamicWhiteBlackColor.withValues(alpha: 0.5),
              ),
            ],
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(
              "Lorem ipsum dolor sit amet",
              style: subtileTextStyle(ref).copyWith(fontSize: 22),
              textAlign: TextAlign.center,
            ),
          ),
          TextButton(
            onPressed: () {
              ref
                  .read(subtitleSettingsStateProvider.notifier)
                  .set(
                    subtitleSettings
                      ..useItalic = false
                      ..useBold = false
                      ..fontSize = 45,
                    true,
                  );
              setState(() {});
            },
            child: Text(context.l10n.reset),
          ),
        ],
      ),
    );
  }
}

class ColorSettingWidget extends ConsumerStatefulWidget {
  final bool hasSubtitleTrack;
  const ColorSettingWidget({super.key, required this.hasSubtitleTrack});

  @override
  ConsumerState<ColorSettingWidget> createState() => _ColorSettingWidgetState();
}

class _ColorSettingWidgetState extends ConsumerState<ColorSettingWidget> {
  String selector = "text";

  Widget button(String text, String value, Color color) {
    return ElevatedButton(
      style: ElevatedButton.styleFrom(
        padding: const EdgeInsets.all(0),
        backgroundColor: Colors.transparent,
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
        elevation: 0,
        shadowColor: Colors.transparent,
      ),
      onPressed: () {
        setState(() {
          selector = value;
        });
      },
      child: Column(
        children: [
          Text(text, style: TextStyle(color: context.textColor)),
          Padding(
            padding: const EdgeInsets.all(2),
            child: Container(
              height: 25,
              width: 25,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(5),
                color: color,
                border: Border.all(
                  width: 2,
                  color: context.dynamicWhiteBlackColor,
                ),
              ),
            ),
          ),
          Text("#${color.hexCode}", style: TextStyle(color: context.textColor)),
          Icon(
            Icons.arrow_drop_down,
            color: selector != value ? Colors.transparent : context.textColor,
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    final subSets = ref.watch(subtitleSettingsStateProvider);
    final textColor = Color.fromARGB(
      subSets.textColorA!,
      subSets.textColorR!,
      subSets.textColorG!,
      subSets.textColorB!,
    );
    final borderColor = Color.fromARGB(
      subSets.borderColorA!,
      subSets.borderColorR!,
      subSets.borderColorG!,
      subSets.borderColorB!,
    );
    final backgroundColor = Color.fromARGB(
      subSets.backgroundColorA!,
      subSets.backgroundColorR!,
      subSets.backgroundColorG!,
      subSets.backgroundColorB!,
    );
    return Padding(
      padding: const EdgeInsets.all(20),
      child: Column(
        children: [
          if (!widget.hasSubtitleTrack)
            Padding(
              padding: const EdgeInsets.only(bottom: 10),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  const Padding(
                    padding: EdgeInsets.all(2),
                    child: Icon(Icons.info_outline_rounded, size: 14),
                  ),
                  Flexible(
                    child: Text(context.l10n.no_subtite_warning_message),
                  ),
                ],
              ),
            ),
          Row(
            children: [
              Expanded(
                flex: 3,
                child: button(context.l10n.text, "text", textColor),
              ),
              Expanded(
                flex: 3,
                child: button(context.l10n.border, "border", borderColor),
              ),
              Expanded(
                flex: 3,
                child: button(
                  context.l10n.background,
                  "backgroud",
                  backgroundColor,
                ),
              ),
            ],
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(
              "Lorem ipsum dolor sit amet",
              style: subtileTextStyle(ref).copyWith(fontSize: 22),
              textAlign: TextAlign.center,
            ),
          ),
          if (selector == "text") ...[
            rgbaFilterWidget(
              subSets.textColorA!,
              subSets.textColorR!,
              subSets.textColorG!,
              subSets.textColorB!,
              (val) {
                if (val.$3 == "r") {
                  ref
                      .read(subtitleSettingsStateProvider.notifier)
                      .set(subSets..textColorR = val.$1.toInt(), val.$2);
                } else if (val.$3 == "g") {
                  ref
                      .read(subtitleSettingsStateProvider.notifier)
                      .set(subSets..textColorG = val.$1.toInt(), val.$2);
                } else if (val.$3 == "b") {
                  ref
                      .read(subtitleSettingsStateProvider.notifier)
                      .set(subSets..textColorB = val.$1.toInt(), val.$2);
                } else {
                  ref
                      .read(subtitleSettingsStateProvider.notifier)
                      .set(subSets..textColorA = val.$1.toInt(), val.$2);
                }
                setState(() {});
              },
              context,
            ),
          ] else if (selector == "border") ...[
            rgbaFilterWidget(
              subSets.borderColorA!,
              subSets.borderColorR!,
              subSets.borderColorG!,
              subSets.borderColorB!,
              (val) {
                if (val.$3 == "r") {
                  ref
                      .read(subtitleSettingsStateProvider.notifier)
                      .set(subSets..borderColorR = val.$1.toInt(), val.$2);
                } else if (val.$3 == "g") {
                  ref
                      .read(subtitleSettingsStateProvider.notifier)
                      .set(subSets..borderColorG = val.$1.toInt(), val.$2);
                } else if (val.$3 == "b") {
                  ref
                      .read(subtitleSettingsStateProvider.notifier)
                      .set(subSets..borderColorB = val.$1.toInt(), val.$2);
                } else {
                  ref
                      .read(subtitleSettingsStateProvider.notifier)
                      .set(subSets..borderColorA = val.$1.toInt(), val.$2);
                }
                setState(() {});
              },
              context,
            ),
          ] else ...[
            rgbaFilterWidget(
              subSets.backgroundColorA!,
              subSets.backgroundColorR!,
              subSets.backgroundColorG!,
              subSets.backgroundColorB!,
              (val) {
                if (val.$3 == "r") {
                  ref
                      .read(subtitleSettingsStateProvider.notifier)
                      .set(subSets..backgroundColorR = val.$1.toInt(), val.$2);
                } else if (val.$3 == "g") {
                  ref
                      .read(subtitleSettingsStateProvider.notifier)
                      .set(subSets..backgroundColorG = val.$1.toInt(), val.$2);
                } else if (val.$3 == "b") {
                  ref
                      .read(subtitleSettingsStateProvider.notifier)
                      .set(subSets..backgroundColorB = val.$1.toInt(), val.$2);
                } else {
                  ref
                      .read(subtitleSettingsStateProvider.notifier)
                      .set(subSets..backgroundColorA = val.$1.toInt(), val.$2);
                }
                setState(() {});
              },
              context,
            ),
          ],
          TextButton(
            onPressed: () {
              ref.read(subtitleSettingsStateProvider.notifier).resetColor();
              setState(() {});
            },
            child: Text(context.l10n.reset),
          ),
        ],
      ),
    );
  }
}

Widget iconButton(
  IconData icon,
  void Function()? onPressed, {
  Color? backgroundColor,
  Color? iconColors,
  double size = 35,
}) => Padding(
  padding: const EdgeInsets.all(5),
  child: SizedBox(
    height: size,
    width: size,
    child: IconButton(
      iconSize: size * 0.9,
      style: ButtonStyle(
        backgroundColor: WidgetStatePropertyAll(backgroundColor),
      ),
      padding: const EdgeInsets.all(1),
      onPressed: onPressed,
      icon: Icon(icon, color: iconColors),
    ),
  ),
);
